<!--  -->
<template>
   <div class='cartList'>
        <header-login @logn="loginTip"></header-login>
        <bread-nav><span slot="name">carList</span></bread-nav>
        <div class="cart-wapper">
            <ul v-if="list.length>0 && showinit == true">
                <li class="title">
                    <span>选择</span>
                    <span>图片</span>
                    <span>名称</span>
                    <span>单价</span>
                    <span>数量</span>
                    <span>价格</span>
                    <span>操作</span>
                </li>
                <li class="item-item" v-for="(v,index) in list" :key="index">
                    <span class="cb-k"><input type="checkbox" :value="v.checked" name="123" id="" v-model="v.checked" @click.stop.prevent="editCart('cked',v)" :key="v.checked"></span>
                    <span class="item-imag"><img :src="'/static/'+v.productImage" :alt="v.productName"></span>
                    <span>{{v.productName}}</span>
                    <span>{{v.salePrice}}</span>
                    <span><button type="button" @click.stop.prevent="editCart('add',v)">+</button><input type="text" name="" id="" v-model="v.productNum"><button type="button" @click.stop.prevent="editCart('min',v)">-</button></span>
                    <span>{{v.salePrice*v.productNum}}</span>
                    <span @click="delBut(v.productId,v.productNum)">删除</span>
                </li>
            </ul>
            <div class="tatal-wapper">
                <div class="left">
                    <input type="checkbox" name="all" id="male" :checked="totalAll" @click="Alltoogle">
                   <label for="male">all</label>
                </div>
                <div class="right">
                    <strong class="allPrice">{{totalPrice}}</strong>
                    <button :class="{'nobg':totalCartNum<=0}" type="button" :disabled="(totalCartNum<=0)" @click="submit">提交订单</button>
                </div>
            </div>
        </div>
        <model :model="modelTip.type" ref="model" v-if="modelTip.showflg">
            <span slot="title">{{modelTip.tipText}}</span>
            <i slot="content">
                {{modelTip.tipContent}}
            </i>
            <strong slot="btn">
                <button type="button" @click="hiden">确定</button>
            </strong>
        </model>
         <model :model="modelTip2.type" ref="model" v-if="modelTip2.showflg">
            <span slot="title">{{modelTip2.tipText}}</span>
            <i slot="content">
                {{modelTip2.tipContent}}
            </i>
            <strong slot="btn">
                <button type="button" @click="deleEvent">确定删除</button>
                <button type="button" @click="hideModel">取消</button>
            </strong>
        </model>
        <v-footer></v-footer>
   </div>
</template>

<script>
    import Vue from 'vue'
    import HeaderLogin from '@/components/HeaderLogin'
    import BreadNav from '@/components/BreadNav'
    import model from '@/components/model'
    import footer from '@/components/footer'
    export default {
       components: {HeaderLogin,BreadNav,model,"v-footer":footer},
       data() {
           return {
                list:[],
                modelTip:{
                    tipText:"",
                    tipContent:"",
                    type:"",
                    showflg:false
                },
                modelTip2:{
                    tipText:"",
                    tipContent:"",
                    type:"",
                    showflg:false
                },
                productId:"",
                num:0,
                showinit:false
           };
       },
       computed: {
           totalCartNum(){
                let num = 0;
                this.list.forEach(item => {
                    if(item.checked == true){
                        num++;
                    }
                })
                return num;
           },
           totalAll(){
               if(this.totalCartNum==this.list.length){
                   return true;
               }else{
                   return false;
               }
           },
           totalPrice(){
               let price = 0;
               this.list.forEach(item => {
                   if(item.checked){
                       price +=(+item.productNum)*+(item.salePrice);
                   }
               })
               return price;
           }
       },
       watch: {},
       methods: {
           submit(){
               this.$router.push({name: 'address', params: {order: "12434"}})
           },
            Alltoogle(){
                let checkedStatus = !this.totalAll;
                this.list.forEach(item => {
                    item.checked = checkedStatus;
                })
                this.all = checkedStatus;
                axios.get('/users/allChecked', {
                params: {
                    checked:this.all
                }
                })
                .then(function (response) {
                    let {data,errno} = response.data;
                    if(!errno){
                        console.log("修改成功");
                    }
                    else if(errno==101){
                            console.log("数据没有，所有没有修改");
                    }else{
                        console.log("数据修改失败");
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
                
            },
            loginTip(param){
               switch (param.res) {
                   case "success":
                       this.fztip("正确",`${param.type}成功`,"success");
                       break;
                    case "err":
                        this.fztip("错误",param.type+"失败,请重新登录","err");
                        break;
                    case "tip":
                        this.fztip("警告",param.type,"tip");
                        break;
                    case "question":
                        this.fztip("问题",param.type,"question");
                        break;
                   default:
                       break;
               }
               this.modelTip.showflg = true;
            //   this.$refs.model.show();
           },
           fztip(a,b,c,d){
                this.modelTip.tipText = a;
                this.modelTip.tipContent = b;
                this.modelTip.type = c;
           },
           fztip2(a,b,c,d){
                this.modelTip2.tipText = a;
                this.modelTip2.tipContent = b;
                this.modelTip2.type = c;
           },
           hideModel(){
               this.fztip2("","","");
               this.modelTip2.showflg = false;
               this.num = 0;
               this.productId = null;
           },
           deleEvent(){
            let _this = this;
            let num = this.num;
            axios.get('/users/cartDel', {
                params: {
                    productId: this.productId
                }
            })
            .then(response => {
                let {data,errno} = response.data;
                if(!errno){
                    this.hideModel();
                    this.fztip("正确提示","删除商品成功","success");
                    let productId = this.productId;
                    
                    this.$store.commit("setCount",{count:(-num),init:false});
                    this.modelTip.showflg=true;
                    // setTimeout(function(){
                    //     _this.num = 0;
                    // },1000)
                    this.initList();
                } else if(errno==10111){
                    this.loginTip({res:"tip",type:"删除失败,请先登录"});
                }else {
                     this.loginTip({res:"err",type:"数据错误，请刷新页面登录再操作"})
                }
            })
            .catch(function (error) {
                console.log(error);
            });
           },
           delBut(param,num){
               console.log(num);
               this.fztip2("删除提示","确定删除商品","tip");
               this.modelTip2.showflg = true;
               this.productId = param;
               this.num = +num;
           },
           editCart(type,item){
               let num = 0;
               let _this = this;
               if(type=="add"){
                   item["productNum"]++
                   num = 1;
               }else if(type=="min"){
                   if( item["productNum"]>1 ) {
                        item["productNum"]--;
                        num = -1;
                   }else{
                       return;
                   }
               }else if(type=="cked"){
                   item.checked = !item.checked;
               }
                axios.get('/users/editCart', {
                    params: {
                       productId:item.productId,
                       productNum:item.productNum,
                       checked:item.checked
                    }
                })
                .then(function (response) {
                    let {data,errno} = response.data;
                    if(!errno){
                        console.log("修改成功");
                        _this.$store.commit("setCount",{count:(+num),init:false});
                    }
                    else if(errno==101){
                         console.log("数据没有，所有没有修改");
                    }else{
                        console.log("数据修改失败");
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
           },
           hiden(){
              this.fztip("","","");
              this.modelTip.showflg=false;  
           },
           fztip(a,b,c,d){
                this.modelTip.tipText = a;
                this.modelTip.tipContent = b;
                this.modelTip.type = c;
           },
           loginTip(param){
               switch (param.res) {
                   case "success":
                       this.fztip("正确",`${param.type}成功`,"success");
                       break;
                    case "err":
                        this.fztip("错误",param.type+"失败,请重新登录","err");
                        break;
                    case "tip":
                        this.fztip("警告",param.type,"tip");
                        break;
                    case "question":
                        this.fztip("问题",param.type,"question");
                        break;
                   default:
                       break;
               }
               this.modelTip.showflg = true;
            //   this.$refs.model.show();
           },
           initList(){
               let _this = this;
               axios.get('/users/cartlist', {
                   params: {
                        
                    }
                })
                 .then(response => {
                    let {data,errno} = response.data;
                    if(!errno){
                       if(!data.length){
                            this.loginTip({res:"tip",type:"购物车为空"});
                            this.list = [];
                           this.showinit = false;
                       }else{
                           this.list = data;
                           this.showinit = true;
                       }
                    }else if(errno==10111){
                         this.loginTip({res:"tip",type:"添加购物车失败,请先登录"})
                    }else{
                         this.loginTip({res:"err",type:"数据错误，请刷新页面登录再操作"})
                    }
                 })
                 .catch(function (error) {
                    console.log(error);
                });
           }
       },
       created() {
           this.initList();
       },
       mounted() {

       },
       beforeCreate() {}, //生命周期 - 创建之前
       beforeMount() {}, //生命周期 - 挂载之前
       beforeUpdate() {}, //生命周期 - 更新之前
       beforeDestroy() {}, //生命周期 - 销毁之前
       activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style lang='less'>
    .cartList{
        .cart-wapper{
            ul{
                width:84%;
                border:1px solid blue;
                margin: 0 auto;
                .title{
                    display: flex;
                    span{flex:auto;text-align: center;border-left:1px solid blue;}

                }
                .item-item{
                    display: flex;
                    align-items: center;
                    span{
                        flex:auto;
                        text-align: center;
                        input[type="text"]{
                            width:40px;
                            line-height: 25px;
                            padding:0;
                            text-align: center;
                        }
                        button{
                            width:40px;
                            line-height: 25px;
                            border:1px solid #FE2D17;
                            background:rgba(255,255,255,.7);
                            margin: 0 15px 0 15px;
                        }
                    }
                    .item-imag{
                        img{width:85px;vertical-align: middle;}
                    }
                }
            }
            .tatal-wapper{
                width:83%;
                margin:0 auto;
                margin-top:20px;
                display: flex;
                font-size: 18px;
                justify-content: space-between;
                .left{
                    label{
                        font-size:20px;
                        font-weight: bold;
                    }
                }
                .right{
                    strong{
                        margin-right: 18px;
                        font-weight: normal;
                    }
                    button{
                        background:crimson;
                        color:#fff;
                        padding:10px;
                        font-size: 15px;
                        &.nobg{
                         background:#ccc;
                        }
                    }
                }
            }
        }
    }
</style>